<template>
  <div>
    <!-- 搜索框 -->
    <Collapse v-model="collapseShow" accordion>
      <Panel name="1">
        <div class="admin-top-right">
          <Button type="success" @click.stop="batchHandleBtn();" class="top-right-btn">批量处理</Button>
        </div>
        <!-- <div align="right"> -->
        <!-- </div> -->
        <div slot="content">
          <Form ref="searchForm" :label-width="100" v-model="condition">
            <Row>
              <Col span="6">
                <FormItem label="处理日期">
                  <DatePicker type="daterange" v-model="deletedDateRange" placeholder="请选择起始和截止日期"></DatePicker>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="举报者">
                  <Input placeholder="请输入举报者姓名" clearable v-model="condition.userName"></Input>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="状态">
                  <Select v-model="condition.status" clearable placeholder="请选择状态">
                    <Option value="1">待处理</Option>
                    <Option value="2">合法</Option>
                    <Option value="3">违规</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="问答类型">
                  <Select v-model="condition.reqAnsType" clearable placeholder="请选择问题类型">
                    <Option value="1">问题</Option>
                    <Option value="2">回答</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="6">
                <FormItem label="举报日期">
                  <DatePicker type="daterange" v-model="createdDateRange" placeholder="请选择起始和截止日期"></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <!-- 查询重置按钮-->
          <div style="text-align:center">
            <Button type="primary" @click="queryMethod()" class="ivu-btn ivu-btn-primary">查询</Button>
            <Button
              type="info"
              @click="handleResetBtn('condition')"
              class="ivu-btn ivu-btn-dashed"
              style="margin-left: 8px"
            >重置</Button>
          </div>
        </div>
      </Panel>
    </Collapse>
    <!-- 数据表格 -->
    <div>
      <Table
        size="small"
        border
        :stripe="true"
        :columns="tableHeader"
        :data="tableData"
        height="500"
        style="margin-top: 12px"
        @on-selection-change="selectionChange"
      ></Table>
    </div>
    <!-- 显示问题内容 -->
    <div>
      <Modal
        :title="reportTitle"
        :value="reqeustContentShow"
        :mask-closable="false"
        :closable="false"
        draggable
      >
        <!-- <Reqeust-answer-content :content="reportEntity.content"/> -->
        <report-details-card :reportObject="reportEntity"></report-details-card>
        <div slot="footer">
          <Button v-if="reportEntity.showOrHandle === 1" type="info" @click="closeHandleModal">关闭</Button>
          <div v-else>
            <Button type="primary" @click="closeHandleModal">取消</Button>
            <Button type="error" @click="handleReport">处理</Button>
          </div>
        </div>
      </Modal>
    </div>
    <!-- 分页组件 -->
    <div>
      <navigation :search.sync="doSearch" @navpage="pagerCallback"></navigation>
    </div>
  </div>
</template>
<script>
import navigation from '@/view/components/navigation/navigation'
import httpUtil from '@/libs/httpUtil'
import ReqeustAnswerContent from '@/view/ora-web/request-answer/RequestAnswerContent.vue'
import ReportDetailsCard from './ReportDetailsCard.vue'

export default {
  name: 'ReportHandle',
  components: {
    ReqeustAnswerContent,
    navigation,
    ReportDetailsCard
  },
  data () {
    return {
      reqeustContentShow: false,
      reportEntity: {
        handleType: 1
      },
      // 表格头
      tableHeader: [
        {
          type: 'selection',
          width: 50,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center',
          fixed: 'left'
        },
        {
          // 状态
          title: '状态',
          key: 'status',
          minWidth: 90,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let status = params.row.status
            if (status === 1) {
              return h(
                'span',
                { style: { color: '#ff9900', fontWeight: 'bold' } },
                '待处理'
              )
            } else if (status === 2) {
              return h(
                'span',
                { style: { color: '#19be6b', fontWeight: 'bold' } },
                '合法'
              )
            } else if (status === 3) {
              return h(
                'span',
                { style: { color: '#ed4014', fontWeight: 'bold' } },
                '违规'
              )
            }
          },
          fixed: 'left'
        },

        {
          title: '举报者',
          key: 'userName',
          minWidth: 100,
          ellipsis: true,
          align: 'center'
        },

        {
          title: '问答类型',
          key: 'reqAnsType',
          minWidth: 100,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let type = params.row.reqAnsType
            if (type === 1) {
              return h(
                'span',
                { style: { color: '#2b85e4', fontWeight: 'bold' } },
                '问题'
              )
            } else {
              return h(
                'span',
                { style: { color: '#19be6b', fontWeight: 'bold' } },
                '回答'
              )
            }
          }
        },

        {
          title: '违规类型',
          key: 'report_type',
          minWidth: 130,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let report_type = params.row.reportType
            if (report_type === 1) {
              return h(
                'span',
                { style: { fontSize: '15px', fontWeight: 'bold' } },
                '含有敏感词语'
              )
            } else {
              return h(
                'span',
                { style: { fontSize: '15px', fontWeight: 'bold' } },
                '其他'
              )
            }
          }
        },
        {
          title: '详细说明',
          key: 'desc',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '举报日期',
          key: 'createdAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },

        {
          title: '处理日期',
          key: 'updatedAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },

        {
          title: '操作',
          minWidth: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            let btns = []
            btns.push(
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showContent(params.row, 1)
                    }
                  }
                },
                '查看'
              )
            )
            if (params.row.status === 1) {
              btns.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.handleBtn(params.row.tid)
                      }
                    }
                  },
                  '处理'
                )
              )
            }
            return h('div', btns)
          }
        }
      ],
      // 表格数据：
      tableData: [],
      collapseShow: false,
      doSearch: false,
      reportTitle: '举报对象详情',
      selectArray: [],
      condition: {},
      createdDateRange: [], // 创建日期的起始截止值
      deletedDateRange: [],
      professionList: [],
      courseList: []
    }
  },
  methods: {
    // 显示内容  showOrHandle：1.查看   2.是删除
    showContent (row, showOrHandle) {
      if (showOrHandle === 1) {
        this.reportEntity = row
        if (row.reqAnsType === 1) {
          this.reportTitle = '举报问题详情'
          this.reportEntity.targetName = '问题'
        } else {
          this.reportTitle = '举报回答详情'
          this.reportEntity.targetName = '回答'
        }
      }
      this.reportEntity.showOrHandle = showOrHandle
      this.reqeustContentShow = true
    },
    // 关闭内容显示
    closeHandleModal () {
      this.reqeustContentShow = false
      this.reportEntity = { handleType: 1 }
    },

    // 多选
    selectionChange (val) {
      this.selectArray = val
      console.log(val)
      console.log('selctArray:', this.selectArray)
      // debugger
    },

    // 处理表格数据
    handleBtn (id) {
      debugger
      id += ','
      // this.handleReport(id);
      this.reportEntity.ids = id
      this.showContent(this.reportEntity, 2)
      this.reportTitle = '举报处理'
    },

    // 批量删除
    batchHandleBtn () {
      let select = this.selectArray
      let ids = ''
      let flag = true
      // 判断有无选择
      if (select.length > 0) {
        select.forEach((entity, n) => {
          if (entity.status !== 1) {
            flag = false
          }
          ids = ids + entity.tid + ','
        })
        if (flag) {
          // this.handleReport(ids);
          this.reportEntity.ids = ids
          this.showContent(this.reportEntity, 2)
        } else {
          this.$Message.warning('含有已处理项')
        }
      } else {
        this.$Message.warning('请先选择需要删除的选项')
      }
    },

    // 向后端请求删除操作
    handleReport () {
      debugger
      httpUtil.asyncPost(
        'admin/rm/report/handle',
        {
          ids: this.reportEntity.ids,
          handleType: this.reportEntity.handleType
        },
        res => {
          if (res.data.code === 200) {
            this.$Message.info(res.data.msg)
            this.queryMethod()
            this.closeHandleModal()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 搜索重置
    handleResetBtn () {
      this.$refs['searchForm'].resetFields()
      this.condition = {}
      this.createdDateRange = ['', '']
      this.deletedDateRange = ['', '']
      this.queryMethod()
    },

    // 点击翻页
    pagerCallback (page, search) {
      let option = {
        url: 'admin/rm/report/queryByCondition',
        pageData: page,
        success: response => {
          this.tableData = response.data.records
        }
      }
      if (search) {
        option.params = {
          data: this.condition
        }
      }
      this.$httpUtil.pageSearch(option)
    },
    queryMethod () {
      if (this.createdDateRange[0] !== '') {
        // 如果选择了日期，取出起始值
        this.condition.createdDateStart = this.createdDateRange[0]
        this.condition.createdDateEnd = this.createdDateRange[1]
      }
      if (this.deletedDateRange[0] !== '') {
        // 如果选择了日期，取出起始值
        this.condition.deletedDateStart = this.deletedDateRange[0]
        this.condition.deletedDateEnd = this.deletedDateRange[1]
      }
      this.doSearch = true
    },

    // 页面初始化
    init () {
      this.queryMethod()
    }
  },
  mounted: function () {
    this.init()
  }
}
</script>
